<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件绑定</title>
    <style></style>
  </head>
  <body>
    <div id="root"></div>
    <hr>
    <h2>原生事件</h2>
    <button id="btn">事件对象</button>
    <input type="text" id="input">
    <script>
      // 按钮的单击事件
      btn.onclick = function(e){
        console.log(e);
      }
      //input元素的change事件
      input.onchange = function(){
        console.log('input 内容变化了!')
      }
    </script>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">
      let callback = () => {
        alert('这次好像没有中奖~~');
      }
      let obj = {
        fn: () => {
          alert('没中');
        }
      }

      let test = () => {
        let fn = () => {
          alert('中奖啦 中奖啦!~~')
        }
        return fn;
      }

      // let res = ;
      //创建虚拟 DOM 对象
      let vdom = <div>
          <h2>绑定事件</h2>
          <button onClick={function(){
            alert('我中奖啦~~');
          }}>点我抽奖</button>
          <button onClick={() => {
            alert('我又中奖啦~~');
          }}>点我抽奖</button>
          <button onClick={callback}>点我抽奖</button>
          <button onClick={obj.fn}>点我抽奖</button>
          <button onClick={test()}>点我抽奖</button>

          <h2>事件对象</h2>
          <button onClick={(e) => {
            //获取事件源
            console.log(e.target);
          }}>事件源</button>


          <a href="http://www.atguigu.com" onClick={(e) => {
            // prevent 阻止  default 默认
            e.preventDefault();
          }}>阻止默认行为</a>

          <button onClick={(e) => {
            console.log(e);
          }}>事件对象</button>

          <h2>React 的 change 事件</h2>
          <input type="text" onChange={() => {
            console.log('react-变化了');
          }} />
        </div>

      //渲染
      ReactDOM.render(vdom, document.querySelector('#root'));
    </script>
</body>
</html>
